<template>
  <div class="order">
    <div class="order__content" v-for="(item,index) in orderData" :key="index" :class="{active: (index+1)%2 !== 0 }">
      <span class="cont">{{item.content}}</span>
      <span class="red" v-if="item.status === '待派工' || item.status === '待处理'">【{{item.status}}】</span>
      <span class="orange" v-else-if="item.status === '待接单'">【{{item.status}}】</span>
      <span class="blue" v-else-if="item.status === '待完成' || item.status === '处理中'">【{{item.status}}】</span>
      <span class="green" v-else-if="item.status === '已完成' || item.status === '已处理'">【{{item.status}}】</span>    
      <span v-else>【{{item.status}}】</span>
    </div>
  </div>
</template>
<script>
import {
getOrderList,
} from 'src/api/api'
export default {
  data() {
    return {
      // orderData: JSON.parse(localStorage.getItem('orderData')),
      orderData: [],
      socket: '',
      setInterval: ''
    }
  },
  mounted() {
    // this.openClick('1')
    // localStorage.setItem('socketClose', false)
    // const list = localStorage.getItem('orderData') ? JSON.parse(localStorage.getItem('orderData')) : []
    // if(list&&list.length > 9) {
    //   list.pop()
    // }
    // list.unshift({content: "【2020-05-06 17:20:25】【西郡】有员工发布了一个新的投诉！", status: "待派工"})
    // localStorage.setItem('orderData', JSON.stringify(list))
    // this.orderData = JSON.parse(localStorage.getItem('orderData'))
    this._getOrderList()
  },
  activated() {
    this.setInterval = setInterval(() => {
      this._getOrderList()
    }, 1000 * 5)
  },
  deactivated() {
    clearInterval(this.setInterval)
  },
  methods: {
    _getOrderList() {
      this.orderData = []
      const params = {
        type: 14
      }
      getOrderList(params).then(res => {
        let list = res.data.list.slice(0,9)
        if(list && list.length > 0) {
          list.forEach(item=>{
            // console.log(JSON.parse(item.dataInfo))
            this.orderData.push(JSON.parse(item.dataInfo))
          })
        }
      })
    }
    // // WebSocket
    // openClick(id) {
    //   localStorage.setItem('socketClose', false)
    //   var _this = this
    //   if (_this.hasLink === true) {
    //     console.log('已经连接了，没有必要了')
    //   }
    //   // const msgOnclick = _this.openMessage
    //   // var url = _this.baseUrl + id
    //   var url = 'ws:192.168.0.104:9797/websocket/dataShow/1'
    //   var ws = new WebSocket(url + '?from=web')
    //   this.socket = ws
    //   ws.onopen = function(e) {
    //     _this.hasLink = true
    //     console.log('链接打开,id:' + id)
    //   }
    //   ws.onmessage = function(e) {
    //     var res = JSON.parse(e.data)
    //      console.log(res)
    //     var content = JSON.parse(res.content)
    //     console.log(content)
    //     let params = {
    //       content: content.content,
    //       status: content.status
    //     }
    //     const list = localStorage.getItem('orderData') ? JSON.parse(localStorage.getItem('orderData')) : []
    //     if(list&&list.length > 9) {
    //       list.pop()
    //     }
    //     list.unshift(params)
    //     localStorage.setItem('orderData', JSON.stringify(list))
    //     this.orderData = JSON.parse(localStorage.getItem('orderData'))
    //   }
    //   ws.onclose = function(e) {
    //     // 断线重连
    //     // console.log(e)
    //     if (localStorage.getItem('socketClose')) {
    //       return false
    //     }
    //     _this.hasLink = false
    //     console.log('链接已经关闭,开始重连,id:' + id)
    //     _this.reconnect(id)
    //   }
    //   ws.onerror = function(e) {
    //     // console.info(e);
    //     console.log('发生异常:,开始重连,id:' + id)
    //     _this.reconnect(id)
    //   }
    //   return ws
    // },
    // reconnect(id) {
    //   // console.log(id)
    //   var _this = this
    //   // "zone_"+id
    //   // var url = _this.baseUrl + id
    //   if (_this.checkLockReconnect(id)) {
    //     return
    //   }
    //   var tag = 'store_' + id
    //   _this.wsObjectStatus[tag] = 1
    //   setTimeout(function() { // 没连接上会一直重连，设置延迟避免请求过多
    //     _this.wsObject[tag] = _this.openClick(id)
    //     _this.wsObjectStatus[tag] = false
    //   }, 15000)
    // },
    // checkLockReconnect(id) {
    //   var _this = this
    //   var tag = 'store_' + id
    //   var lockReconnect = this.wsObjectStatus[tag]
    //   if (lockReconnect && lockReconnect === 1 || _this.hasLink === true) {
    //     console.log('id:' + id + ',已在重连')
    //     return true
    //   } else {
    //     return false
    //   }
    // },
  }
}
</script>
<style lang="scss">
.order {
  // height: 100%;
  font-size: 13px;
  padding: 7px 10px 10px;
  height: 247px;
  overflow: auto;
  &__content {
    display: flex;
    justify-content: space-between;
    height: 36px;
    line-height: 36px;
    flex-wrap: nowrap;
    padding: 0 10px;
    .cont {
      width: 80%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .red {
      color: #FF3150;
    }
    .orange {
      color: #FFA919;
    }
    .blue {
      color: #45F0EA;
    }
    .green {
      color: #53ED73;
    }
  }
  .active {
    background:rgba(255,255,255,0.1);
  }
}
/* 设置滚动条的样式 */
  .order::-webkit-scrollbar {
    width:10px;
  }
  /* 滚动槽 */
  .order::-webkit-scrollbar-track {
    border-radius: 5px;
    // background-color: #eee;
  }
  /* 滚动条滑块 */
  .order::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #606981;
  }
</style>
